<template>
<div class="personal">
  <van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
  <div class="personal-item">
    <div class="personal-img">
      <img src="@/assets/img/头像.png" alt="">
    </div>
    <div class="personal-name">张三</div>
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="姓名" label="姓名" placeholder="姓名" />
      <van-field v-model="username" name="性别" label="性别" placeholder="性别" />
      <van-field v-model="username" name="所在地" label="所在地" placeholder="所在地" />
      <van-field v-model="username" name="个人手机" label="个人手机" placeholder="个人手机" />
    </van-form>

  </div>
  <div style="margin: -60px 30px;">
    <van-button round block plain  type="primary" native-type="submit">保存</van-button>
  </div>
</div>
</template>

<script>
export default {
  name: 'personal',
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'main'
      })
    },
  },
}
</script>

<style scoped>
.personal {
  position: absolute;
  width: 375px;
  background: linear-gradient(0deg, rgba(194, 228, 253, 0) 0%, #dcfad6 56%, #c2f3c9 100%);
}
.personal-item {
  position: relative;
  width: 335px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(170, 170, 170, 0.15);
  border-radius: 8px;
  margin: 90px auto;
  padding: 15px;
  box-sizing: border-box;
}

.personal-img {
  position: absolute;
  top: -10%;
  left: 15%;
  transform: translateX(-50%);
}

.personal-img img {
  width: 70px;
  height: 70px;
}

.personal-name {
  position: absolute;
  left: 30%;
}

.van-form {
  margin-top: 45px;
}
</style>
